//登录盒子压住了 注册盒子
// 需求1 : 点击a链接,让对应的盒子显示隐藏
let a1 = document.querySelector('.register a')
let a2 = document.querySelector('.login a')
let register = document.querySelector('.register')
let login = document.querySelector('.login')

console.log(a1, a2, register, login)
//绑定点击事件
a1.addEventListener('click', function () {
    register.style.display = 'none'
    login.style.display = 'block'
})
a2.addEventListener('click', function () {
    register.style.display = 'block'
    login.style.display = 'none'
})

//需求2 :用户输入 信息校验
let input1 = document.querySelector('.register [name=username]')
let input2 = document.querySelector('.register [name=password]')
let input3 = document.querySelector('.login [name=username]')
let input4 = document.querySelector('.login [name=password]')

verifyInput(input1, '用户名不能为空', /^[\S]{2,15}$/, '用户名必须为2~15位非空白字符串')
verifyInput(input2, '密码不能为空', /^[\S]{6,15}$/, '密码必须为6~15位非空白字符串')
verifyInput(input3, '用户名不能为空', /^[\S]{2,15}$/, '用户名必须为2~15位非空白字符串')
verifyInput(input4, '密码不能为空', /^[\S]{6,15}$/, '密码必须为6~15位非空白字符串')

function verifyInput(ele, txt1, reg, txt2) {
    ele.addEventListener('input', function () {
        if (!this.value.trim()) {
            {
                this.nextElementSibling.style.display = "block"
                this.nextElementSibling.innerHTML = txt1
                return
            }
        } else {
            this.nextElementSibling.style.display = "none"
            this.nextElementSibling.innerHTML = ""
        }
        if (reg.test(this.value.trim())) {
            this.nextElementSibling.style.display = "none"
            this.nextElementSibling.innerHTML = ""
        } else {
            this.nextElementSibling.style.display = "block"
            this.nextElementSibling.innerHTML = txt2
        }
    })
}

//获取注册表单 的数据

//需求3. 给注册的表单绑定提交事件
let formReg = document.querySelector('.register form')
formReg.addEventListener('submit', function (e) {
    //阻止表单的默认提交,改为使用ajax提交
    e.preventDefault()
    //发送ajax - 请求方式, 资源路径,对应参数

    axios({
        url: '/api/register',
        method: 'post',
        // data: `username=${input1.value.trim()}&password=${input2.value.trim()}`
        // 简单写法 
        // data:jQuery(this).serialize()
        data: $(this).serialize()
    }).then(({
        data: res
    }) => {
        //校验 
        console.log(res)
        if (res.code == 0) {
            //成功提示,触发注册模块中的a链接的点击事件, 清空表单
            toastr.success('恭喜您,注册用户成功!')
            a1.click()
            formReg.reset()
        }

    })
})

//需求4. 给登录的表单绑定提交事件
let formLog = document.querySelector('.login form')

formLog.addEventListener('submit', function (e) {
    //阻止表单的默认提交,改为使用ajax提交
    e.preventDefault()
    //发送ajax - 请求方式, 资源路径,对应参数

    axios({
        url: '/api/login',
        method: 'post',
        // data: `username=${input3.value.trim()}&password=${input4.value.trim()}`
        // 简单写法 
        // axios的this指向上级
        // data:jQuery(this).serialize()
        data: $(this).serialize()
    }).then(({
        data: res
    }) => {
        //校验 
        console.log(res)
        if (res.code == 0) {
            //成功提示,触发注册模块中的a链接的点击事件, 清空表单
            toastr.success('恭喜您,登录成功!')
            setTimeout(() => {
                location.href = './index.html'
            }, 500)
            //登录 会有个令牌需要本地保存,后面讲解如何使用
            localStorage.setItem('myToken', res.token)
        }

    })
})